import { useRequest } from "ahooks"
import { Space, Spin } from "antd"
import { queryChargeData } from "./service"
import { history, styled } from '@umijs/max'
import RadioButton from "@/components/RadioButton"
import { useState } from "react"
import { Card } from "@/components/Card"
import dayjs from "dayjs"
import { jump2target } from "@/utils/common"

const Content = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;

  .inner-card {
    background-color: #F7F8FA;
    border-radius: 2px 2px 2px 2px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px 0;

    .title {
      height: 18px;
      line-height: 18px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: var(--ant-diy-text-color-light);
      position: absolute;
    }

    .value {
      height: 42px;
      font-size: 32px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      color: var(--ant-diy-text-color);
      line-height: 42px;
      position: absolute;
    }

    .compare {
      height: 18px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: var(--ant-diy-text-color-light);
      position: absolute;
      display: flex;
      align-items: center;
      gap: 15px;

      .value {
        color: var(--ant-color-primary);
      }
    }
  }

  .inner-card-large {
    grid-column: span 3;
    height: 150px;

    .title {
      top: 31px;
      left: 27px;
    }

    .value {
      top: 74px;
      left: 27px;
    }

    .compare {
      top: 88px;
      right: 17px;
    }
  }

  .inner-card-small {
    grid-column: span 2;
    height: 174px;

    .title {
      top: 31px;
      left: 18px;
    }

    .value {
      top: 74px;
      left: 18px;
    }

    .compare {
      top: 137px;
      right: 18px;
    }
  }
`

const ChargeDataCard: React.FC = () => {
  const [tabValue, setTabValue] = useState<string>('today')
  const { data, loading } = useRequest(() => queryChargeData({
    day: tabValue === 'today' ? dayjs().format('YYYYMMDD') : dayjs().subtract(1, 'day').format('YYYYMMDD'),
  }), {
    refreshDeps: [tabValue],
  })

  const jump2stationReport = () => {
    jump2target('/report/stationReport')
  }

  return <Card
    header={
      <Space size={12}>
        <span>充电数据</span>
        <RadioButton
          items={[
            {label: '今日', value: 'today'},
            {label: '昨日', value: 'yesterday'},
          ]}
          value={tabValue}
          onChange={setTabValue}
        />
      </Space>
    }
    extra={<a onClick={jump2stationReport}>场站报表</a>}
  >
    <Spin spinning={loading}>
      <Content>
        <div className="inner-card inner-card-large">
          <div className="title">充电总度数(度)</div>
          <div className="value">{ data?.data.power || 0 }</div>
          {/* <div className="compare">
            <span>较上月</span>
            <span style={{color: (data?.data[tabValue].electric.compare || 0) >= 0 ? 'var(--ant-color-primary)' : 'var(--ant-green)'}}>
              { (data?.data[tabValue].electric.compare || 0) >= 0 ? <CaretUpOutlined /> : <CaretDownOutlined />}
              <span style={{marginLeft: 2}}>{ data?.data[tabValue].electric.compare }%</span>
            </span>
          </div> */}
        </div>
        <div className="inner-card inner-card-large">
          <div className="title">充电订单总数(个)</div>
          <div className="value">{ data?.data.orderNum || 0 }</div>
        </div>
        <div className="inner-card inner-card-small">
          <div className="title">充电订单总额(元)</div>
          <div className="value">{ data?.data.totalMoney || 0 }</div>
        </div>
        <div className="inner-card inner-card-small">
          <div className="title">订单电费总额(元)</div>
          <div className="value">{ data?.data.electricMoney || 0 }</div>
        </div>
        <div className="inner-card inner-card-small">
          <div className="title">订单服务费总额(元)</div>
          <div className="value">{ data?.data.serviceMoney || 0 }</div>
        </div>
      </Content>
    </Spin>
  </Card>
}

export default ChargeDataCard